<template>
  <div class="page">
    <div class="input-container">
      <input v-model="topInputValue" placeholder="请输入上面的内容" id="myInput">
    </div>
    <div class="input-container">
      <input v-model="bottomInputValue" placeholder="请输入下面的内容">
    </div>
    <div class="button-container">
      <button @click="handleButtonClick">提交</button>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';

const topInputValue = ref('');
const bottomInputValue = ref('');

const handleButtonClick = () => {
  console.log('上面的输入内容：', topInputValue.value);
  console.log('下面的输入内容：', bottomInputValue.value);
};

onMounted(() => {

  var inputElement = document.getElementById('myInput');

// 监听 input 事件
  inputElement.addEventListener('input', function(event) {
    console.log('用户输入:', event);
  });

// 监听 change 事件
  inputElement.addEventListener('change', function(event) {
    console.log('输入框值变化:', event.target.value);
  });

// 监听 keydown 事件
  inputElement.addEventListener('keydown', function(event) {
    console.log('按键按下:', event);
  });

// 监听 focus 和 blur 事件
  inputElement.addEventListener('focus', function(event) {
    console.log('输入框获得焦点', event.key);
  });

  inputElement.addEventListener('blur', function(event) {
    console.log('输入框失去焦点', event.key);
  });
});


</script>

<style scoped>
.page {
  padding: 20px;
}

.input-container {
  margin-bottom: 20px;
}

.button-container {
  text-align: center;
}
</style>